<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品轮播展示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1000px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .carousel {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            border-radius: 4px;
            margin-bottom: 20px;
        }

        .carousel-inner {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .carousel-item {
            flex: 0 0 100%;
            position: relative;
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 15px;
        }

        .product-info h3 {
            margin-bottom: 5px;
            font-size: 1.2rem;
        }

        .product-info p {
            margin-bottom: 5px;
            font-size: 0.9rem;
        }

        .price {
            font-weight: bold;
            color: #ff6b6b;
            font-size: 1.1rem;
        }

        .controls {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        .control-btn {
            background: #4a90e2;
            color: white;
            border: none;
            padding: 8px 15px;
            margin: 0 5px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .control-btn:hover {
            background: #3a7bc8;
        }

        .indicators {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            background: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        .indicator.active {
            background: #4a90e2;
        }

        .status {
            text-align: center;
            margin-top: 10px;
            font-size: 0.9rem;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>热门产品展示</h1>
        <div class="carousel">
            <div class="carousel-inner" id="carousel-inner">
                <!-- 产品项将通过JavaScript动态生成 -->
            </div>
        </div>

        <div class="controls">
            <button class="control-btn" id="prev-btn">上一个</button>
            <button class="control-btn" id="toggle-btn">暂停</button>
            <button class="control-btn" id="next-btn">下一个</button>
        </div>

        <div class="indicators" id="indicators">
            <!-- 指示器将通过JavaScript动态生成 -->
        </div>

        <div class="status" id="status">自动轮播中...</div>
    </div>

    <script>
        // delay函数实现 - 封装setTimeout为Promise形式
        const delay = (handler, ms, ...args) => setTimeout(handler, ms, ...args);

        // 产品数据
        const products = [
            {
                id: 1,
                name: "智能手表 Pro",
                description: "24小时健康监测，50米防水，续航长达7天",
                price: "¥1,299",
                image: "https://placehold.co/800x400/4a90e2/ffffff?text=智能手表+Pro"
            },
            {
                id: 2,
                name: "无线降噪耳机",
                description: "主动降噪技术，环境音模式，40小时续航",
                price: "¥899",
                image: "https://placehold.co/800x400/ff6b6b/ffffff?text=无线降噪耳机"
            },
            {
                id: 3,
                name: "超薄笔记本电脑",
                description: "最新处理器，16GB内存，512GB固态硬盘",
                price: "¥6,999",
                image: "https://placehold.co/800x400/27ae60/ffffff?text=超薄笔记本电脑"
            },
            {
                id: 4,
                name: "智能家居套装",
                description: "语音控制，远程操作，兼容多种智能设备",
                price: "¥2,499",
                image: "https://placehold.co/800x400/f39c12/ffffff?text=智能家居套装"
            },
            {
                id: 5,
                name: "专业相机套装",
                description: "2400万像素，4K视频录制，含两个专业镜头",
                price: "¥8,999",
                image: "https://placehold.co/800x400/9b59b6/ffffff?text=专业相机套装"
            }
        ];

        // 轮播状态管理
        const carouselState = {
            currentIndex: 0,
            isPlaying: true,
            intervalId: null,
            transitionInProgress: false,
            autoPlayDelay: 3000 // 自动播放间隔时间(ms)
        };

        // DOM元素
        const carouselInner = document.getElementById('carousel-inner');
        const indicatorsContainer = document.getElementById('indicators');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const toggleBtn = document.getElementById('toggle-btn');
        const statusEl = document.getElementById('status');

        // 初始化轮播
        function initCarousel() {
            // 生成轮播项
            products.forEach(product => {
                const item = document.createElement('div');
                item.className = 'carousel-item';
                item.innerHTML = `
                    <img src="${product.image}" alt="${product.name}">
                    <div class="product-info">
                        <h3>${product.name}</h3>
                        <p>${product.description}</p>
                        <div class="price">${product.price}</div>
                    </div>
                `;
                carouselInner.appendChild(item);

                // 生成指示器
                const indicator = document.createElement('div');
                indicator.className = 'indicator';
                indicator.dataset.index = products.indexOf(product);
                indicator.addEventListener('click', () => goToSlide(parseInt(indicator.dataset.index)));
                indicatorsContainer.appendChild(indicator);
            });

            // 设置初始状态
            updateCarousel();
            startAutoPlay();
        }

        // 更新轮播显示
        function updateCarousel() {
            // 更新轮播位置
            carouselInner.style.transform = `translateX(-${carouselState.currentIndex * 100}%)`;

            // 更新指示器
            document.querySelectorAll('.indicator').forEach((indicator, index) => {
                if (index === carouselState.currentIndex) {
                    indicator.classList.add('active');
                } else {
                    indicator.classList.remove('active');
                }
            });

            // 更新状态文本
            statusEl.textContent = carouselState.isPlaying ?
                `自动轮播中...当前展示: ${products[carouselState.currentIndex].name}` :
                `已暂停...当前展示: ${products[carouselState.currentIndex].name}`;
        }

        // 开始自动播放
        function startAutoPlay() {
            if (carouselState.intervalId) {
                clearInterval(carouselState.intervalId);
            }

            carouselState.isPlaying = true;
            toggleBtn.textContent = '暂停';
            statusEl.textContent = `自动轮播中...当前展示: ${products[carouselState.currentIndex].name}`;

            // 使用delay函数实现自动轮播
            function autoPlay() {
                if (carouselState.isPlaying && !carouselState.transitionInProgress) {
                    carouselState.transitionInProgress = true;

                    // 使用delay函数延迟执行下一张切换
                    delay(() => {
                        nextSlide();
                        carouselState.transitionInProgress = false;

                        // 递归调用以实现连续自动播放
                        autoPlay();
                    }, carouselState.autoPlayDelay);
                }
            }

            // 启动自动播放
            autoPlay();
        }

        // 停止自动播放
        function stopAutoPlay() {
            carouselState.isPlaying = false;
            toggleBtn.textContent = '继续';
            statusEl.textContent = `已暂停...当前展示: ${products[carouselState.currentIndex].name}`;
        }

        // 切换到下一张
        function nextSlide() {
            carouselState.currentIndex = (carouselState.currentIndex + 1) % products.length;
            updateCarousel();

            // 使用delay函数添加轮播切换的动画效果通知
            delay(() => {
                console.log(`已切换到产品: ${products[carouselState.currentIndex].name}`);
            }, 100);
        }

        // 切换到上一张
        function prevSlide() {
            carouselState.currentIndex = (carouselState.currentIndex - 1 + products.length) % products.length;
            updateCarousel();

            // 使用delay函数添加轮播切换的动画效果通知
            delay(() => {
                console.log(`已切换到产品: ${products[carouselState.currentIndex].name}`);
            }, 100);
        }

        // 跳转到指定幻灯片
        function goToSlide(index) {
            if (index >= 0 && index < products.length) {
                carouselState.currentIndex = index;
                updateCarousel();

                // 使用delay函数模拟用户点击后的反馈延迟
                delay(() => {
                    console.log(`用户选择了产品: ${products[index].name}`);
                }, 200);
            }
        }

        // 事件监听
        prevBtn.addEventListener('click', () => {
            // 使用delay函数模拟按钮点击的防抖
            if (!carouselState.transitionInProgress) {
                carouselState.transitionInProgress = true;
                prevSlide();

                // 使用delay函数设置短暂的过渡锁定，防止快速连续点击
                delay(() => {
                    carouselState.transitionInProgress = false;
                }, 300);
            }
        });

        nextBtn.addEventListener('click', () => {
            // 使用delay函数模拟按钮点击的防抖
            if (!carouselState.transitionInProgress) {
                carouselState.transitionInProgress = true;
                nextSlide();

                // 使用delay函数设置短暂的过渡锁定，防止快速连续点击
                delay(() => {
                    carouselState.transitionInProgress = false;
                }, 300);
            }
        });

        toggleBtn.addEventListener('click', () => {
            if (carouselState.isPlaying) {
                stopAutoPlay();
            } else {
                startAutoPlay();
            }

            // 使用delay函数记录用户交互
            delay(() => {
                console.log(`用户${carouselState.isPlaying ? '开启' : '暂停'}了自动轮播`);
            }, 100);
        });

        // 初始化轮播
        initCarousel();

        // 使用delay函数模拟页面加载完成后的数据分析
        delay(() => {
            console.log('页面加载完成，开始收集用户浏览数据...');
            // 在实际应用中，这里可能会发送页面加载事件到分析服务
        }, 1500);

        // 使用delay函数模拟产品推荐系统
        delay(() => {
            console.log('根据用户历史浏览记录，推荐产品ID: 2, 5');
            // 在实际应用中，这里可能会基于用户数据调整轮播顺序或高亮特定产品
        }, 3000);
    </script>
</body>

</html>